<template>
    <ZWDrawer ref="DrawerRef" @cancel="cancel" @unqualified="unqualified" @qualified="qualified">
        <div class="pre_list">
            <!--基础信息-->
            <ul class="pre_main">
                <li v-for="(item, index) in view_info" :key="index" class="pre_list_item">
                    <template v-if="item.content == 'status'">
                        <span class="pre__item_label">{{ item.name }}</span>
                        <span :class="info.status == 1 ? 'pre_item_con uncomplete' : 'pre_item_con complete'">{{
                            info.status == 1 ? '任务未完成' : '任务已完成'
                        }}</span>
                    </template>
                    <template v-else-if="item.content == 'cycle_task'">
                        <span class="pre__item_label">{{ item.name }}</span>
                        <span class="pre_item_con">{{
                            info.flag == 1
                                ? info.begin_time + '-' + info.end_time
                                : info.cycle_unit == 1
                                ? '每日' + ' ' + info.cycle_begin + '-' + info.cycle_end
                                : info.cycle_unit == 2
                                ? '每周' + ' ' + info.cycle_begin + '-' + info.cycle_end
                                : '每月' + ' ' + info.cycle_begin + '-' + info.cycle_end
                        }}</span>
                    </template>
                    <template v-else>
                        <span class="pre__item_label">{{ item.name }}</span>
                        <span class="pre_item_con">{{ info[item.content] }}</span>
                    </template>
                </li>
            </ul>
            <!--企微招募-->
            <ul v-if="formData.type == 3" class="pre_main">
                <li class="pre_list_item">
                    <div style="display: flex">
                        <span class="pre__item_label">关联信息：</span>
                        <div style="display: flex">
                            <div v-for="(item, index) in addwx.cust_info" :key="index" class="cust_wx">
                                <el-avatar
                                    style="width: 44px; height: 44px; vertical-align: middle; margin-right: 10px"
                                    shape="square"
                                    :src="item.avatar ? item.avatar : '/static/user.png'"></el-avatar>
                                <div style="display: inline-block">
                                    {{ item.name
                                    }}<span :style="item.corp_name ? 'color: #ff6b00;' : 'color: #59d2a0;'">{{
                                        item.corp_name ? ' ' + item.corp_name : ' @微信'
                                    }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="pre_list_item">
                    <div>
                        <span class="pre__item_label">{{ info.object_type == 1 ? '线索评级：' : '客户评级：' }}</span>
                        <span class="pre_item_con">{{ addwx.cust_stage }}</span>
                    </div>
                </li>
            </ul>
            <!--电话销售-->
            <ul v-if="formData.type == 1" class="pre_main">
                <li class="pre_list_item">
                    <div>
                        <span class="pre__item_label">电话拨打：</span>
                        <span class="pre_item_con">{{ call.call_type == 1 ? '网络电话' : '传统电话' }}</span>
                    </div>
                </li>
                <li class="pre_list_item">
                    <div>
                        <span class="pre__item_label">沟通结果：</span>
                        <span class="pre_item_con">{{
                            call.call_result == 1
                                ? '已接通'
                                : call.call_result == 2
                                ? '未接通'
                                : call.call_result == 3
                                ? '挂断'
                                : call.call_result == 4
                                ? '空号'
                                : '未联系'
                        }}</span>
                    </div>
                </li>
                <li class="pre_list_item">
                    <div>
                        <span class="pre__item_label">{{ info.object_type == 1 ? '线索评级：' : '客户评级：' }}</span>
                        <span class="pre_item_con">{{ call.cust_stage }}</span>
                    </div>
                </li>
                <li class="pre_list_item">
                    <div class="img_list">
                        <span class="pre__item_label">任务凭据：</span>
                        <div v-for="(item, index) in call.cert" :key="index" class="item-image">
                            <el-image
                                class="image-detail"
                                :src="item.url"
                                :preview-src-list="[item.url]"
                                :preview-teleported="true"></el-image>
                        </div>
                    </div>
                </li>
            </ul>
            <!--客户拜访-->
            <ul v-if="formData.type == 2" class="pre_main">
                <li class="pre_list_item">
                    <div>
                        <span class="pre__item_label">拜访计划：</span>
                        <span class="pre_item_con">
                            <el-icon color="#FF6B00">
                                <Clock />
                            </el-icon>
                            拜访时间：{{ visit.plan ? visit.plan.visit_start_time : '--' }}
                        </span>
                    </div>
                </li>
                <li class="pre_list_item">
                    <span class="pre__item_label"></span>
                    <div class="pre_item_con">
                        <el-icon color="#FF6B00">
                            <LocationInformation />
                        </el-icon>
                        拜访地点：{{ visit.plan ? visit.plan.visit_location : '--' }}
                    </div>
                </li>
                <li class="pre_list_item">
                    <div>
                        <span class="pre__item_label">签到信息：</span>
                        <span class="pre_item_con">
                            <el-icon color="#59D2A0">
                                <CircleCheck />
                            </el-icon>
                            签到时间：{{ visit.sign ? visit.sign.created_at : '' }}
                        </span>
                    </div>
                </li>
                <li class="pre_list_item">
                    <span class="pre__item_label"></span>
                    <div class="pre_item_con">
                        <el-icon color="#59D2A0">
                            <LocationInformation />
                        </el-icon>
                        签到地点：{{ visit.sign ? visit.sign.signin_location : '' }}
                    </div>
                </li>
                <li v-if="visit.sign" class="pre_list_item">
                    <span class="pre__item_label"></span>
                    <div v-for="(item, index) in visit.sign.cert" :key="index" class="item-image">
                        <el-image
                            class="image-detail"
                            :src="item.url"
                            :preview-src-list="[item.url]"
                            :preview-teleported="true"></el-image>
                    </div>
                </li>
                <li class="pre_list_item">
                    <div class="add-fllow">
                        <span class="pre__item_label">跟进记录：</span>
                        <el-button
                            v-show="info.is_self == 1 && info.status == 1 && info.object_type == 2"
                            style="margin-left: 315px"
                            size="small"
                            type="primary"
                            @click="showAddFollowFun()"
                            >添加跟进</el-button
                        >
                        <el-button
                            v-show="info.object_type == 1 && info.status != 2"
                            style="margin-left: 315px"
                            size="small"
                            type="primary"
                            @click="showAddFollowFun()"
                            >添加跟进</el-button
                        >
                    </div>
                </li>
                <div>
                    <el-scrollbar max-height="400px" wrap-class="list-box" min-size="300px">
                        <div v-if="visit.follow" class="item-box">
                            <div v-for="(item, index) in visit.follow" :key="index" class="item">
                                <div class="time-title">{{ item.time }}</div>
                                <div v-for="(item, index) in item.content" :key="item.id" class="list-item">
                                    <div class="title">
                                        <div :class="index == 0 ? 'round-tips top_tips' : 'round-tips'"></div>
                                        <div :class="index == 0 ? 'time top_title' : 'time'">{{ item.created_at }}</div>
                                        <div style="display: flex; justify-content: space-between">
                                            <div>
                                                <span>{{ item.name }}</span
                                                >在客户为<span class="active">【{{ item.stage }}】</span>时添加跟进
                                            </div>
                                            <div
                                                v-show="info.is_self == 1 && info.status == 1 && info.object_type == 2">
                                                <el-icon class="del-icon" @click="delFllow(item.id)">
                                                    <Delete :size="30" />
                                                </el-icon>
                                                <el-icon class="edit-icon" @click="editFllow(item, info.object_type)">
                                                    <Edit :size="30" />
                                                </el-icon>
                                            </div>
                                            <div v-show="info.object_type == 1 && info.status != 2">
                                                <el-icon class="del-icon" @click="delFllow(item.id)">
                                                    <Delete :size="30" />
                                                </el-icon>
                                                <el-icon class="edit-icon" @click="editFllow(item, info.object_type)">
                                                    <Edit :size="30" />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="content">
                                        {{ item.content || '' }}
                                        <div v-if="item?.cust_follow_attachment.length > 0" class="imgList">
                                            <template v-for="it in item.cust_follow_attachment" :key="it?.type">
                                                <!-- 图片 -->
                                                <el-image
                                                    v-if="it?.type == 1"
                                                    class="img"
                                                    :src="it?.media_file.absolute_url"
                                                    :preview-src-list="[it?.media_file.absolute_url]"
                                                    :preview-teleported="true"
                                                    fit="cover" />
                                                <!-- 文件 -->
                                                <el-image
                                                    v-else
                                                    class="img"
                                                    :src="getSuffixIcon(it?.media_file.absolute_url)"
                                                    fit="cover"
                                                    @click="
                                                        downFile(it?.media_file.absolute_url, it?.media_file.name)
                                                    " />
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
                <li class="pre_list_item">
                    <div>
                        <span class="pre__item_label">{{ info.object_type == 1 ? '线索评级：' : '客户评级：' }}</span>
                        <span class="pre_item_con">{{ visit.cust_stage }}</span>
                    </div>
                </li>
                <li class="pre_list_item">
                    <div class="img_list">
                        <span class="pre__item_label">任务凭据：</span>
                        <div v-for="(item, index) in visit.cert" :key="index" class="item-image">
                            <el-image
                                class="image-detail"
                                :src="item.url"
                                :preview-src-list="[item.url]"
                                :preview-teleported="true"></el-image>
                        </div>
                    </div>
                </li>
            </ul>
            <!--审核信息-->
            <ul class="pre_main">
                <li v-for="(item, index) in view_audit" :key="index" class="pre_list_item">
                    <template v-if="item.content == 'audit_status'">
                        <span class="pre__item_label">{{ item.name }}</span>
                        <span class="pre_item_con">{{
                            audit.audit_status == 1 ? '未审核' : audit.audit_status == 2 ? '合格' : '不合格'
                        }}</span>
                    </template>
                    <template v-else>
                        <span class="pre__item_label">{{ item.name }}</span>
                        <span class="pre_item_con">{{ audit[item.content] }}</span>
                    </template>
                </li>
            </ul>
        </div>
    </ZWDrawer>
    <!--不合格-->
    <Dialog ref="DialogRef" :app-dialog="appDialog">
        <div class="reject_reason">
            <div style="white-space: nowrap; line-height: 30px">
                <span style="color: red; white-space: no-wrap">*</span>不合格原因：
            </div>
            <el-input
                v-model="paramsData.audit_reject_reason"
                :rows="5"
                type="textarea"
                placeholder="请输入不合格原因"></el-input>
        </div>
    </Dialog>
    <!--合格-->
    <ZWDeletdialog ref="DeletdialogRef" @submit="confirmClick"></ZWDeletdialog>
    <!--添加跟进-->
    <addFllow ref="AddFollowRef" @save="getDetail"></addFllow>
    <!--删除跟进-->
    <ZWDeletdialog ref="DeleFllowRef" @submit="confirmDel"></ZWDeletdialog>
</template>
<script lang="tsx" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElButton, ElMessage, ElPopover, ElProgress } from 'element-plus';
import { getSuffixIcon, downFile } from '@/utils/utils';
import ZWDeletdialog from '@/components/ZWDeletdialog.vue';
import addFllow from './addFllow.vue';
import Dialog from '@/components/Dialog.vue';
import { taskAudit, objectDetail, fllowDel, delClue } from '@/api/employe/employeetasks/taskmanage';
import ZWDrawer from '@/components/ZWDrawer.vue';
const emit = defineEmits(['refresh']);
const DrawerRef = ref(null);
const DialogRef = ref(null);
const AddFollowRef = ref(null);
const DeletdialogRef = ref(null);
const DeleFllowRef = ref(null);
const info = ref({});
const follow_id = ref();
const view_info = reactive([
    { name: '执行人：', content: 'created_uid_name' },
    { name: '任务状态：', content: 'status' },
    { name: '任务周期：', content: 'cycle_task' },
    { name: '完成时间：', content: 'complete_time' }
]);
const audit = ref({});
const view_audit = reactive([
    { name: '审核人：', content: 'audit_user_name' },
    { name: '审核时间：', content: 'audit_time' },
    { name: '审核结果：', content: 'audit_status' },
    { name: '不合格原因：', content: 'audit_reject_reason' }
]);
const addwx = ref({});
const call = ref({});
const visit = ref({});
const formData = reactive({
    type: '',
    cust_name: ''
});
const paramsData = reactive({
    task_id: '',
    object_id: '',
    audit_status: 2,
    audit_reject_reason: ''
});
const cancelHandel = () => {
    appDialog.visible = false;
};
const submitHandel = () => {
    if (!paramsData.audit_reject_reason) {
        ElMessage.error('请输入不合格原因');
        return;
    }
    paramsData.audit_status = 3;
    taskAudit(paramsData).then((res: any) => {
        ElMessage.success('审核成功');
        cancelHandel();
        cancel();
        emit('refresh');
    });
};
const appDialog = reactive({
    visible: false,
    title: '',
    width: '564px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确定'
});
const openObject = (val: any, row: any) => {
    switch (val.cust_type) {
        case 1:
            DrawerRef.value.title = `【${val.type}】${row.name}执行详情 <span style="display:inline-block;width:64px;line-height:24px;background:#FFFAF9;border-radius:2px;border:1px solid #FFC69E;font-size:12px;color: #FF724D;text-align:center">电话销售</span>`;
            break;
        case 2:
            DrawerRef.value.title = `【${val.type}】${row.name}执行详情 <span style="display:inline-block;width:64px;line-height:24px;background:#EBFFF3;border-radius:2px;border:1px solid #BCF1D1;font-size:12px;color: #59D2A0;text-align:center">客户拜访</span>`;
            break;
        case 3:
            DrawerRef.value.title = `【${val.type}】${row.name}执行详情 <span style="display:inline-block;width:64px;line-height:24px;background:#EBFAFF;border-radius:2px;border:1px solid #BFE3FF;font-size:12px;color: #3DABFF;text-align:center">企微招募</span>`;
    }
    if (val.showExamine) {
        DrawerRef.value.showExamine = true;
    } else {
        DrawerRef.value.showExamine = false;
    }
    DrawerRef.value.isShow = false;
    DrawerRef.value.drawer = true;
    DrawerRef.value.width = 600;
    formData.cust_name = row.name;
    formData.task_id = val.task_id;
    paramsData.object_id = row.id;
    paramsData.task_id = val.task_id;
    getDetail();
};
const getDetail = () => {
    const params = {
        task_id: formData.task_id,
        object_id: paramsData.object_id
    };
    objectDetail(params).then((res: any) => {
        formData.type = res.type;
        info.value = res.info;
        audit.value = res.audit;
        addwx.value = res.addwx;
        call.value = res.call;
        visit.value = res.visit;
    });
};
const cancel = () => {
    DrawerRef.value.drawer = false;
};
const unqualified = () => {
    appDialog.visible = true;
    appDialog.title = `【${formData.type == 1 ? '电话销售' : formData.type == 2 ? '客户拜访' : '企微招募'}】${
        formData.cust_name
    }的审核`;
};
const qualified = () => {
    DeletdialogRef.value.appDialog.title = `【${
        formData.type == 1 ? '电话销售' : formData.type == 2 ? '客户拜访' : '企微招募'
    }】${formData.cust_name}的审核`;
    DeletdialogRef.value.content = '您确定该客户的任务合格吗？';
    DeletdialogRef.value.appDialog.visible = true;
};
const confirmClick = () => {
    paramsData.audit_status = 2;
    paramsData.audit_reject_reason = '';
    taskAudit(paramsData).then((res: any) => {
        ElMessage.success('审核成功');
        cancel();
        emit('refresh');
    });
};
const delFllow = (val: any) => {
    follow_id.value = val;
    DeleFllowRef.value.appDialog.visible = true;
};
const confirmDel = () => {
    if (info.value.object_type == 1) {
        delClue({ clue_follow_id: follow_id.value }).then((res: any) => {
            ElMessage.success('删除成功');
            getDetail();
        });
    } else {
        fllowDel({ follow_id: follow_id.value }).then((res: any) => {
            ElMessage.success('删除成功');
            getDetail();
        });
    }
};
const showAddFollowFun = () => {
    if (!info.value.object_id) {
        ElMessage.error('当前数据异常,请稍后再试');
        getDetail();
        return;
    }
    AddFollowRef.value.drawerData.userInfo = info.value;
    AddFollowRef.value.drawerData.show = true;
};
const editFllow = (data: any, type: string) => {
    AddFollowRef.value.getFllowDetail(data, type);
    AddFollowRef.value.drawerData.userInfo = info.value;
    AddFollowRef.value.drawerData.show = true;
};
defineExpose({
    openObject
});
</script>
<style lang="scss" scoped>
.tags {
    width: 64px;
    height: 24px;
    background: #fffaf9;
    border-radius: 2px;
    border: 1px solid #ffc69e;
}

.reject_reason {
    margin: 18px 0;
    display: flex;
}

.pre_list {
    margin: 15px 30px;
    box-sizing: border-box;

    .pre_main:nth-child(1) {
        padding-top: 12px;
    }

    .pre_main {
        .pre_list_item {
            margin-bottom: 24px;
            display: flex;
            font-size: 14px;
            font-weight: 300;
            text-align: right;

            .pre__item_label {
                display: inline-block;
                width: 85px;
                color: #33302d;

                .cust_wx {
                    box-sizing: border-box;
                    width: 200px;
                    height: 68px;
                    padding: 12px;
                    border-radius: 4px;
                    border: 1px solid #eaeaea;

                    .qwchat {
                        color: #ff6b00;
                    }

                    .wechat {
                        color: #59d2a0;
                    }
                }
            }

            .pre_item_con {
                text-align: left;
                flex: 1;
                color: #33302d;
            }

            .pre_item_right {
                margin-left: 85px;
                line-height: 30px;
                flex: 1;
                text-align: left;
                color: #33302d;
            }

            .uncomplete {
                color: #fe292b;
            }

            .complete {
                color: #59d2a0;
            }

            .item-image {
                margin-right: 12px;
                display: inline-block;
                vertical-align: top;

                .image-detail {
                    width: 100px;
                    height: 100px;
                    border-radius: 4px;
                }
            }
        }

        .img_list {
            margin-right: 58px;
        }
    }
}

.list-box {
    .item {
        padding-left: 20px;
        margin-bottom: 26px;

        .time-title {
            font-size: 14px;
            font-weight: 600;
            color: #33302d;
            line-height: 14px;
            margin-bottom: 16px;
        }

        .list-item {
            padding-left: 10px;
            border-left: dashed 1px #ffc69e;
            position: relative;

            .round-tips {
                position: absolute;
                border: 2px solid #ff6b00;
                width: 5px !important;
                height: 5px !important;
                border-radius: 50%;
                left: -5px;
                top: 17px;
            }

            .top_tips {
                top: 0;
            }
        }

        .time {
            font-size: 12px;
            font-weight: 300;
            color: #969696;
            padding: 16px 0;
        }

        .top_title {
            padding-top: 0;
        }

        .title {
            font-size: 14px;
            font-weight: 500;
            color: #33302d;
            margin-bottom: 16px;

            span {
                color: #0081ff;
            }

            .active {
                color: #ff6b00;
            }

            .del-icon {
                cursor: pointer;
                margin-right: 12px;
            }

            .edit-icon {
                cursor: pointer;
            }
        }

        .content {
            width: 425px;
            background: #f9f9f9;
            border: 1px solid #eaeaea;
            padding: 16px;
            font-size: 14px;
            font-weight: 500;
            color: #33302d;

            .img {
                width: 73px;
                height: 67px;
                margin-top: 9px;
                margin-right: 10px;
            }
        }
    }
}
</style>
